import { useState } from 'react'
import { Tabs, Image } from 'antd-mobile'
import Lists from '@/components/List'
import style from './index.module.scss'
import { itemType } from './type'
import { useNavigate } from 'react-router-dom'
import { saveID, savePath } from '@/reduxToolkit/reducers/detail'
import { useDispatch } from 'react-redux'


const RigthTab = (props: any) => {
  const [title] = useState(['畅销', '新书', '精选'])    
  const [typeList] = useState(['sales', 'price', 'comments_count'])    
  const [activeType, setActiveType] = useState('sales') // 当前下标
  const navigate = useNavigate()
  const dispatch: any = useDispatch()

  // 跳转至详情页
  const goDetail = (id: number) => {
    navigate('/detail')
    dispatch(saveID(id))
    dispatch(savePath('category'))
  }

  const getContent = () => {
    return title.map((item, index) => {
      return (
        <Tabs.Tab title={item} key={typeList[index]}>
          <Lists page='category' type={activeType} menuID={props.menuID} getlist={(goodlist: any) => {
            return goodlist.map((itemB: itemType) => {
              return (
                <div className={style.item} key={itemB.id} onClick={() => goDetail(itemB.id)}>
                  <div className={style.img}>
                      <Image src={itemB.cover_url}/>
                  </div>

                  <div className={style.desc}>
                      <p className={style.title}>{itemB.title}</p>
                      <p className={style.des}>值得购买的一本书</p>
                      <p className={style.price}>￥{itemB.price}</p>
                  </div>
                </div>
              )
            })
          }}></Lists>
        </Tabs.Tab>
      )
    })
  }

  return (
    <>
      <Tabs style={{ '--title-font-size': '15px' }} onChange={(key: string) => setActiveType(key)}>
        {getContent()}     
      </Tabs>
    </>      
  )
}

export default RigthTab